import * as THREE from 'three';
import './index.css'


// 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';


// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scence = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
// console.log(geometry.attributes.uv)

//LoadingManager
const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = (url, itemsLoaded, itemsTotal) => {
    console.log(`Started loading file: ${url}.\nLoaded ${itemsLoaded} of ${itemsTotal} files.`)
}
loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {
    console.log(`Loading file: ${url}.\nLoaded ${itemsLoaded} of ${itemsTotal} files.`)
}
loadingManager.onLoad = () => {
    console.log('Loading complete!')
}
loadingManager.onError = (url) => {
    console.log(`There was an error loading ${url}`)
}

// Textures
const textureLoader = new THREE.TextureLoader(loadingManager)
// const colorTexture = textureLoader.load('../assets/textures/door/color.jpg')
// const colorTexture = textureLoader.load('../assets/textures/checkerboard-1024x1024.png')
const colorTexture = textureLoader.load('../assets/textures/checkerboard-8x8.png')
const alphaTexture = textureLoader.load('../assets/textures/door/alpha.jpg')
const ambientOcclusionTexture = textureLoader.load('../assets/textures/door/ambientOcclusion.jpg')
const heightTexture = textureLoader.load('../assets/textures/door/height.jpg')
const metalnessTexture = textureLoader.load('../assets/textures/door/metalness.jpg')


// 复制贴图
// colorTexture.repeat.x = 2
// colorTexture.repeat.y = 3
// colorTexture.wrapS = THREE.RepeatWrapping
// colorTexture.wrapT = THREE.RepeatWrapping
// 镜像复制
// colorTexture.wrapS = THREE.MirroredRepeatWrapping
// colorTexture.wrapT = THREE.MirroredRepeatWrapping


//offset  偏移
colorTexture.offset.x = 0
colorTexture.offset.y = 0


//rotation  旋转   默认以左下角为原点
colorTexture.rotation = Math.PI / 4

// 更改旋转远点
colorTexture.center = new THREE.Vector2(0.5, 0.5)



// Minification filter 缩小滤镜
colorTexture.minFilter = THREE.NearestFilter  // 清晰锐利

// Magnification filter  放大滤镜
colorTexture.magFilter = THREE.NearestFilter   //当纹理很小时，使用放大滤镜会变得很清楚




const material = new THREE.MeshBasicMaterial({
    map: colorTexture,
    // wireframe: true
})
const mesh = new THREE.Mesh(geometry, material);
scence.add(mesh)


// Sizes
const Sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update size
    Sizes.width = window.innerWidth
    Sizes.height = window.innerHeight

    // Update camera
    camera.aspect = Sizes.width / Sizes.height
    camera.updateProjectionMatrix()

    // Updaet renderer
    renderer.setSize(Sizes.width, Sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})


const camera = new THREE.PerspectiveCamera(75, Sizes.width / Sizes.height, 1, 100)

// 相机的初始位置在（0，0，0）中心点，看不见物体，移动相机
camera.position.z = 3
scence.add(camera)


// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true  //添加阻尼效果  修改之后需要update


// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas,
})
renderer.setSize(Sizes.width, Sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))  //解决抗锯齿,不需要超过2，避免性能浪费 

const tick = () => {
    controls.update()
    // Render
    renderer.render(scence, camera);
    window.requestAnimationFrame(tick);
}

tick()